<template>
  <el-menu
      class="el-menu-demo"
      mode="horizontal"
      router
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
  >
    <el-menu-item v-for="(item) in items" :key="item.key" :index="item.path">{{ item.content }}</el-menu-item>
    <span style="float: right; margin: auto 0 auto 800px;color: white">欢迎{{ this.$store.state.user.nickname }}</span>
    <el-button type="danger" style="float: right; margin: auto" @click="logout">登出</el-button>
  </el-menu>
</template>

<script>
export default {
  name: "NavMenu",
  data() {
    return {
      items: [
        {path: "/home", content: "首页", key: 1},
        {path: "/note", content: "笔记", key: 2},
        {path: "/library", content: "图书", key: 3},
        {path: "/config", content: "管理", key: 4}
      ]
    }
  },
  methods: {
    logout() {
      this.$store.commit('logout')
      this.$axios.get("logout").then(success => {
        console.log(success.data)
      }).catch(fail => {
        console.log(fail)
      })
      this.$router.replace('/login')

    }
  }
}
</script>

<style scoped>

</style>